<style lang="scss" scoped>
  @import "../assets/css/transition.css";
  $chi: 4vw;
  .grouping {
    .item_header {
      padding-top: $chi;
      padding-bottom: $chi;
      .header_r {
        width: 60vw;
        .icon {
          font-size: 5vw;
          margin-right: 2vw;
        }
        .name {

        }
      }
    }
    .item_content {
      overflow: hidden;
    }
  }
</style>

<template lang="pug">
  .grouping
    ul
      li(v-for="(item, i) in items" :key="i")
        .item_header.container_min_rl.box_between(@click="animation(i)")
          .header_r
            icon.icon.ash(icon="angle-right" ref="icon")
            span.name.ellipsis {{item.name}}
          .header_l
            span.ash {{item.stay | peopleNum(item.total)}}
        transition(@enter="enter"  @leave="leave")
          .item_content(v-show="transition[i]")
            slot(:data="item")
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  //每个组的人
  export default {
    name: "grouping",
    props: ['items'],
    data() {
      return {
        transition: [],
      }
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),

    },
    methods: {
      ...mapMutations([]),
      init() {
        this.items.forEach( (val,i) => this.transition[i] = false)
      },
      animation(i) {
        let b = this.transition
        this.$set(b, i, !b[i])
        this.iconA(i)
      },
      iconA(i) {
        const el = this.$refs.icon[i]
        let deg = this.transition[i] ? 90 : 0;
        this.$Velocity(el, { rotateZ: deg + 'deg' }, { duration: 600 })
      },
      enter(el, done) {
        this.slide(el, 'Down', done);
      },
      leave(el, done) {
        this.slide(el, 'Up', done);
      },
      slide(el, sli, done = function(){}) {
        this.$Velocity(el, 'slide' + sli, { duration: 600, complete: done });
      }
    },
    created() {
      this.init();
    },
    mounted() {

    },
    filters: {
      peopleNum(stay, total) {
        return stay + ( total ? '/'+total : '' );
      },
    }
  }
</script>

